<div id="page-body">
  <div class='row'>
    <p>
      You can customize the css classes applied to dates by overwriting the <code>display.paint</code>.
      The function provides a <a href='../namespace/unit.html'>Unit</a> value (extended to include "decade"),
      the date involved and an array of string that represents the classes that will be applied.
    </p>
  </div>

  <div class='row'>
    <div class='container'>
      <div class='row'>
        <div class='col-sm-6'>
          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>
          <div
            class='input-group'
            id='datetimepicker1'
            data-td-target-input='nearest'
            data-td-target-toggle='nearest'
          >
            <input
              id='datetimepicker1Input'
              type='text'
              class='form-control'
              data-td-target='#datetimepicker1'
            />
            <span
              class='input-group-text'
              data-td-target='#datetimepicker1'
              data-td-toggle='datetimepicker'
            >
               <span class='fas fa-calendar'></span>
             </span>
          </div>
        </div>
      </div>
    </div>
    <script type='text/javascript'>
      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
      datetimepicker1.display.paint = (unit, date, classes, element) => {
        if (unit === tempusDominus.Unit.date) {
          if (date.isSame(new tempusDominus.DateTime().manipulate(1, 'date'), unit)) {
            classes.push('special-day');
          }
        }
      };
    </script>
    <style>
        .special-day {
            background-color: deeppink !important;
        }
    </style>
  </div>

  <div class='row'>
  <pre>
<code class='language-js'>//example picker
const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));

datetimepicker1.display.paint = (unit, date, classes, element) => {
  if (unit === tempusDominus.Unit.date) {
    //highlight tomorrow
    if (date.isSame(new tempusDominus.DateTime().manipulate(1, 'date'), unit)) {
      classes.push('special-day');
    }
  }
}</code>
    </pre>
  </div>
</div>

<div id="page-meta">
  <div id="title">Plugins - Paint</div>
  <div id="post-date">02/05/2022</div>
  <div id="update-date">03/21/2022</div>
  <div id="excerpt">How to use add custom classes with Tempus Dominus.</div>
  <div id="tags">datepicker, javascript, open source, tempus dominus, eonasdan</div>
</div>
